<template>
  <div class="app-container">
    <el-button type="success" size="small" style="margin-bottom: 10px;" @click="$router.back()">
      返回
    </el-button>
    <el-alert title="基础信息" style="margin-bottom: 10px" :closable="false" type="success" />
    <div class="info">
      <div class="item">
        <div class="li">
          <div>任务名称：</div>
          <div>{{ info.taskName }}</div>
        </div>
        <div class="li">
          <div>执行航线：</div>
          <div>{{ info.routeName }}</div>
        </div>
        <div class="li">
          <div>任务策略：</div>
          <div>{{ info.taskStrategy == 1 ? "单次任务" : "周期性任务" }}</div>
        </div>
        <div class="li">
          <div>执行开始时间：</div>
          <div>{{ info.executionStartTime }}</div>
        </div>
        <div class="li">
          <div>智能规划最佳返航路线：</div>
          <div>{{ info.bestReturnRoute == 0 ? "启用" : "停用" }}</div>
        </div>
        <div class="li">
          <div>航线飞行中失联：</div>
          <div>
            {{ info.lostContactDuringFlight == 1 ? "返航" : "继续执行" }}
          </div>
        </div>
      </div>
      <div class="item">
        <div class="li">
          <div>任务类型：</div>
          <div>
            {{
              info.taskType == 1
                ? "巡检任务"
                : info.taskType == 2
                  ? "取证任务"
                  : info.taskType == 3
                    ? "活动保障任务"
                    : "应急响应任务"
            }}
          </div>
        </div>
        <div class="li">
          <div>执行设备：</div>
          <div>{{ info.deviceName }}</div>
        </div>
        <div class="li">
          <div>执行周期：</div>
          <div>{{ info.executionCycle }}</div>
        </div>
        <div class="li">
          <div>执行结束时间：</div>
          <div>{{ info.executionEndTime }}</div>
        </div>
        <div class="li">
          <div>返航高度：</div>
          <div>{{ info.returnAltitude }}</div>
        </div>
        <div class="li">
          <div>累计执行次数：</div>
          <div>{{ info.cumulativeExecutionTimes }}</div>
        </div>
      </div>
    </div>
    <el-alert title="任务执行情况" style="margin-bottom: 10px" :closable="false" type="success" />
    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column label="序号" prop="id" width="100">
        <template slot-scope="{ row, $index }">
          {{ (listQuery.pageNo - 1) * listQuery.pageSize + $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="任务名称" prop="taskName" />
      <el-table-column label="执行航线" prop="routeName" />
      <el-table-column label="航线类型" prop="routeType">
        <template slot-scope="{ row }">
          <div v-if="row.routeType == 1">定点航线</div>
          <div v-if="row.routeType == 2">环形航线</div>
          <div v-if="row.routeType == 3">路径跟随航线</div>
        </template>
      </el-table-column>
      <el-table-column label="任务执行时间" prop="executionStartTime" />
      <el-table-column label="任务结束时间" prop="executionEndTime" />
      <el-table-column label="总耗时（小时）" prop="totalTimeConsumption" />
      <el-table-column label="任务状态" align="center">
        <template slot-scope="{ row }">
          <div v-if="row.taskStatus == 1">待执行</div>
          <div v-if="row.taskStatus == 2">进行中</div>
          <div v-if="row.taskStatus == 3">已完成</div>
          <div v-if="row.taskStatus == 4">未执行</div>
          <div v-if="row.taskStatus == 5">已终止</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{ row, $index }">
          <el-button type="primary" size="mini" @click="handleCreate(row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="详情" :visible.sync="dialogFormVisible" width="1000px">
      <el-alert title="告警信息" show-icon="true" effect="dark" :closable="false" type="warning" />
      <div class="text">
        <div>2024-10-11 8:20:10 无人机电量不足</div>
        <div>2024-10-11 8:20:10 飞行高度异常</div>
        <div>2024-10-11 8:20:10 GPS信号弱</div>
      </div>
      <el-alert show-icon="true" title="视频记录" style="margin-bottom: 10px" :closable="false" effect="dark"
        type="success" />
      <div class="video">
        <div class="li">
          <div>2024-10-11 8:00:09</div>
          <img class="img" src="@/assets/images/bg.jpg" alt="">
        </div>
        <div class="li" style="margin: 0 20px">
          <div>2024-10-11 8:00:09</div>
          <img class="img" src="@/assets/images/bg.jpg" alt="">
        </div>
        <div class="li">
          <div>2024-10-11 8:00:09</div>
          <img class="img" src="@/assets/images/bg.jpg" alt="">
        </div>
      </div>
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
        @pagination="getList" />
      <el-alert show-icon="true" title="图片记录" effect="dark" style="margin-bottom: 10px" :closable="false"
        type="success" />
      <div class="video">
        <div class="li">
          <div>2024-10-11 8:00:09</div>
          <img class="img" src="@/assets/images/bg.jpg" alt="">
        </div>
        <div class="li" style="margin: 0 20px">
          <div>2024-10-11 8:00:09</div>
          <img class="img" src="@/assets/images/bg.jpg" alt="">
        </div>
        <div class="li">
          <div>2024-10-11 8:00:09</div>
          <img class="img" src="@/assets/images/bg.jpg" alt="">
        </div>
      </div>
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
        @pagination="getList" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 关闭 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { taskRecordDetail, taskRecordDetailList } from '@/api/uavtask'
import Pagination from '@/components/Pagination'
export default {
  name: 'TaskDetail',
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 1,
      listLoading: true,
      dialogFormVisible: false,
      dialogStatus: '',
      listQuery: {
        pageNo: 1,
        pageSize: 20
      },
      id: '',
      info: {}
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetail()
    this.getList()
  },
  methods: {
    getDetail() {
      taskRecordDetail(this.id).then((response) => {
        this.info = response
      })
    },
    getList() {
      this.listLoading = true
      taskRecordDetailList({
        id: this.id
      }).then((response) => {
        this.list = response.list
        this.total = response.total
        this.listLoading = false
      })
    },

    handleCreate() {
      this.dialogFormVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.info {
  display: flex;
  margin-bottom: 30px;

  .item {
    flex: 0 0 50%;

    .li {
      display: flex;

      div {
        flex: 0 0 50%;
        color: #333;
        line-height: 40px;

        &:first-child {
          text-align: right;
        }

        &:last-child {
          text-align: left;
        }
      }
    }
  }
}

.text {
  line-height: 30px;
  padding: 10px 0 20px 20px;
}

.video {
  display: flex;
  align-items: center;

  .li {
    width: 300px;
  }

  .img {
    width: 100%;
    margin-top: 10px;
  }
}

::v-deep .el-dialog__wrapper {
  .el-alert {
    width: 240px !important;
  }
}
</style>
